<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="clear">clear</button>
</body>
<script>
    
    // 问题!!!!!!!!!
    // 计时器 一般情况下 不会嵌套计时器  => 每隔计时器都是独立的 不受其他因素干扰 (外层的计时器 不会等待内层计时器结束)
    // 解决方法 => 延时器改计时器   => 延时器和函数递归  

    var clear = document.getElementsByClassName("clear")[0];
    var delayTimer = null;
    fn();

    clear.onclick = function(){
        clearTimeout(delayTimer);
    }

    function fn(){
        clearTimeout(delayTimer);
        delayTimer =  setTimeout(function(){
            console.log(1111);
            fn();
        },1000)
    }



 /*    setInterval(function () {  //每隔5秒执行
        console.log("外层计时器执行");
        
        var num = 10;
        var timer = setInterval(function () {   // 10后面关闭
            num--;
            console.log("内层计时器执行",num);
            
            if (num == 0) {
                clearInterval(timer);
            }

        }, 1000);

    }, 5000); */




</script>
</html>